<%--
    Document   : baseLayout
    Created on : Apr 7, 2011, 4:16:45 PM
    Author     : pvhuy
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title><tiles:insertAttribute name="title" ignore="true"></tiles:insertAttribute></title>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="styles/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="styles/slideShow.js"></script>
        <script type="text/javascript">
            var tip;

            function ToolTip(id){
                var div=document.getElementById(id);

                this.Show =  function(e,strHTML){
                    div.innerHTML=strHTML;div.style.display='block';
                    div.style.top=(e.pageY+2) + "px";div.style.left=(e.pageX+2)+ "px"; div.focus();
                }

                this.Hide= function(e){div.style.display='none';}
            }

            function getPos(offsettype,what){

                var totaloffset=(offsettype=="X")? what.offsetLeft : what.offsetTop;
                var parentEl=what.offsetParent;

                while (parentEl!=null){
                    totaloffset=(offsettype=="X")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
                    parentEl=parentEl.offsetParent;
                }

                return totaloffset;
            }

            function initHilight(){

                var tip = new ToolTip("tooltip");

                $(".imageFrame").hover(
                function(e){this.parentNode.className='bookHighlight';tip.Show(e,'<img src="'+this.src+ '" />')},
                function(e){this.parentNode.className='bookFrame';tip.Hide(e);});

                $(".frameSmall").hover(function(e){tip.Show(e,'<img src="'+this.src+ '" />')},function(e){tip.Hide(e);});
                $(".frameLarge").hover(function(e){tip.Show(e,'<img src="'+this.src+ '" />')},function(e){tip.Hide(e);});
                $(".frameMiddle").hover(function(e){tip.Show(e,'<img src="'+this.src+ '" />')},function(e){tip.Hide(e);});
                $(".frameTiny").hover(function(e){tip.Show(e,'<img src="'+this.src+ '" />')},function(e){tip.Hide(e);});
            }

            var hintText;

            function hintBox(){
                var o=$('input.hintTextbox');

                hintText = o[0].value;

                o.focus(function(){if (this.value==hintText) {this.value = "";this.className ="hintTextboxActive";}});
                o.blur(function(){if (this.value.length==0) {this.value = hintText;this.className = "hintTextbox";}});
            }

            function createPopMenu(popId,headerID, topPos){

                var popup=$(popId);

                popup[0].style.visibility='hidden'
                popup.mouseout(function(event){this.style.visibility='hidden'});
                popup.mouseover(function(event){this.style.visibility='visible'});

                $(headerID).mouseover(function(event){
                    var y=getPos('Y',this)+15;
                    if (popup[0].style.top=='2000px') popup[0].style.top=y+'px';
                    popup[0].style.visibility='visible';
                });
            }

            function doSearch(){

                var s=$('#SearchText')[0];

                s.value=$('#s')[0].value;
                $('#maNhomSearch')[0].value=$('#optionSearch')[0].value;
                $('#TheLoaiID')[0].value='';

                var f=$('#dataForm')[0]

                f.submit();
            }

            function checkEnter(e){

                if(e.keyCode == 13){ doSearch();return false}
                return true
            }

            $(document).ready(function() {

                hintBox();

                createPopMenu('#shopMenu','#shopHeader','190px');

                initHilight();

                if ($('#danhMuc').length>0){ //Home
                    slideSwitch();

                    $('.linkAds a').mouseover(function(){var i=this.innerHTML;i=parseInt(i)-1; slideGoto(i); return false;});
                    //      $('#eventBook').mouseover(function(){showEvent('book')});
                    //      $('#eventGif').mouseover(function(){showEvent('gif')});
                    //      $('#listEventGif')[0].style.visibility='hidden';
                }


            });

            function menu(e){
                var $tabSelected = $('#menu li.tabSelected');
                    $tabSelected.removeClass('tabSelected').addClass('tabNormal');
                    $(e).removeClass('tabNormal').addClass('tabSelected');
            }

            function showEvent(s){

                var x1=$('#listEventBook')[0];
                var x2=$('#listEventGif')[0]

                if (s=='book'){
                    x1.style.visibility='visible';$("#eventBook")[0].innerHTML="<b>[Sách]</b>"
                    x2.style.visibility='hidden';$("#eventGif")[0].innerHTML="Quà tặng"
                } else{

                    x1.style.visibility='hidden';$("#eventBook")[0].innerHTML="Sách"
                    x2.style.visibility='visible';$("#eventGif")[0].innerHTML="<b>[Quà tặng]</b>"
                }
            }



            /*

        function getData(){

        $.ajax({

          url:"data.html",

          cache: false,

          success: function(html){

             alert(html);

          }

        });
        }
             */

        </script>

    </head>

    <body style="min-width:1000px">

        <!--Begin Header-->
        <tiles:insertAttribute name="header"></tiles:insertAttribute>
        <!--End Header-->

        <!--Begin Left Column-->
        <tiles:insertAttribute name="left"></tiles:insertAttribute>
        <!--End Left Column-->

        <!--CENTER COLUMN-->
        <div style="float:left;padding-top:5px; width:55%;height:auto; min-width:530px">
            <!--Search Box-->
            <tiles:insertAttribute name="searchBox"></tiles:insertAttribute>
            <!--End Search Box-->

            <!--Main Content-->
            <tiles:insertAttribute name="body"></tiles:insertAttribute>
            <!--End Main Content-->
        </div>
        <!--END CENTER COLUMN-->

        <!--Right Column-->
        <tiles:insertAttribute name="right"></tiles:insertAttribute>
        <!--End Right Column-->

        <!--Footer -->
        <tiles:insertAttribute name="footer"></tiles:insertAttribute>
        <!---End Footer-->
    </body>
</html>

